<template>
  <div class="hello">
    <h1>Hello !!!</h1>
    <h1>This is a template with vite,vue3,vue-router and pinia</h1>
    <h1>
      creaded by
      <a href="https://gitee.com/brokyz/vite-vue3-template" target="_blank"
        >brokyz</a
      >
    </h1>
    <br />
    <router-link to="/"
      ><h1 style="color: tomato">Click to Home view</h1></router-link
    >
    <router-link to="/about"
      ><h1 style="color: tomato">Click to About view</h1></router-link
    >
    <router-view style="color: tomato"></router-view>
    <br />
    <h1 style="color: pink">
      num in pinia is: {{ store.num }}, getDoubleNum:{{ store.getDoubleNum }}
    </h1>
    <button @click="store.num++">click to increase num</button>
  </div>
</template>

<script setup>
import { useStore } from '@/store/index.js'
const store = useStore()
</script>

<style scoped>
.hello {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
